/**
 * 语言能力
 */
import React from 'react';
import { Form, Button, Icon } from 'antd';
import { FormHeader, FormLayout, BoxRemove } from '../../components';
import { requireRule } from './util';
import { SelectDegree, SelectDict } from '../select';

const KEY = 'skillLanguage';

function Item({ form, onRemove, index }) {
    const { getFieldDecorator } = form;
    return (
        <BoxRemove onRemove={onRemove}>
            <FormLayout type="col2">
                <Form.Item label="语种">
                    {getFieldDecorator(`${KEY}LangType[${index}]`, { rules: requireRule('请选择语种') })(
                        <SelectDict code="recruitTalentLangType" />
                    )}
                </Form.Item>
                <Form.Item label="听说能力">
                    {getFieldDecorator(`${KEY}ListenSpeakAbility[${index}]`, { rules: requireRule('请选择听说能力') })(
                        <SelectDegree />
                    )}
                </Form.Item>
                <Form.Item label="读写能力">
                    {getFieldDecorator(`${KEY}ReadWriteAbility[${index}]`, { rules: requireRule('请选择读写能力') })(
                        <SelectDegree />
                    )}
                </Form.Item>
            </FormLayout>
        </BoxRemove>
    );
}

export default function ResumeSkill({ form }) {
    form.getFieldDecorator(`${KEY}Keys`, { initialValue: [] });

    const keys = form.getFieldValue(`${KEY}Keys`);

    const renderItems = () =>
        keys?.map(k => (
            <Item
                form={form}
                key={k}
                index={k}
                onRemove={() => {
                    form.setFieldsValue({
                        [`${KEY}Keys`]: keys.filter(key => key !== k)
                    });
                }}
            />
        ));

    return (
        <div style={{ marginBottom: 24 }}>
            <FormHeader title="语言能力" id={`resume-${KEY}`} />
            {renderItems()}
            <Button
                block
                onClick={() => {
                    const nextKeys = keys.concat(keys.length);
                    form.setFieldsValue({
                        [`${KEY}Keys`]: nextKeys
                    });
                }}
            >
                <Icon type="plus" />
                添加语言能力
            </Button>
        </div>
    );
}
